JavaScript获取与更改文本框中值的代码

来源:网络整理作者:wy 发布时间:2020-12-23 17:35

分享一段js代码，用于获取与更改文本框的值，对有意研究document.getElementById用法的朋友，是个不错的参考。...

用js获取包含在文本框内的文本，来看下面的例子：

<html> <head> <title>获取文本框中的值_</title> <script type="text/javascript"> function getValues(){ var oTextbox1=document.getElementById("txt1"); var oTextbox2=document.getElementById("txt2"); alert("The value of txt1 is ""+oTextbox1.value+""n"+ "The value of txt2 is"" +oTextbox2.value+"""); } </script> </head> <body> <input type="text" size="12" id="txt1" /><br/> <textarea rows="5" cols="25" id="txt2"></textarea><br /> <input type="button" value="Get Values" onclick="getValues()"/> </body> </html>

以上例子：
提供了两个文本框，一个是单行的另一个是多行的，还有一个按钮。
当点击按钮时，会出现警告框显示各个文本框中的内容。

也可以在两个文本框中输入一些内容，然后点击按钮。

因为value特性是个字符串，可以使用任何字符串的特性和方法。

例如，可以使用length特性来获取文本框中的文本长度：

<html> <head> <title>获取文本框中内容的长度_</title> <script type="text/javascript"> function getLengths(){ var oTextbox1=document.getElementById("txt1"); var oTextbox2=document.getElementById("txt2"); alert ("The length of txt1 is "+oTextbox1.value.length+"n" +"The length of txt2 is" +oTextbox2.value.length); } </script> </head> <body> <input type="text" size="12" id="txt1"/><br /> <textarea rows="5" cols="25" id="txt2"></textarea><br /> <input type="button" value="Get Lengths "onclick="getLengths()" /> </body> </html>

以上例子使用value的length特性来判断每个文本框中的字符数。

此value特性也可用于给文本框设置新内容，例如：

<html> <head> <title>设置文本框中的内容_</title> <script type="text/javascript"> function setValues(){ var oTextbox1=document.getElementById("txt1"); var oTextbox2=document.getElementById("txt2"); oTextbox1.value="fitst textbox"; oTextbox2.value="second textbox"; } </script> </head> <body> <input type="text" size="12" id="txt1" /><br /> <textarea rows="5" cols="25" id="txt2"></textarea><br /> <input type="button " value="Set Values" onclick="setValues()" /> </body> </html>

以上示例，点击按钮可将第一个文本框设置为"first textbox"，将第二个文本框设置为"second textbox"。

就是这些了，三段js代码，讲述了对文本框的三个方面的操作，获取文本框中的内容、获取文本框中内容的长，以及给文本框设置新内容。
希望对大家有所帮助。